/* Estilos para el ícono de información */
.info-icon {
    color: yellow;
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.2em;
}

.info-icon:hover {
    color: yellowgreen;
}

/* Estilos para el modal de imágenes */
.modal-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-image-container img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.modal-image-container img:first-child {
    width: 80%; /* Imagen más grande */
}

.modal-image-container img:last-child {
    width: 50%; /* Imagen más pequeña */
}

/* Estilos generales */
/* Estilos generales */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* ❌ Usa Segoe UI */
    background: #0077B6;
    color: white;
    text-align: center;
    padding: 20px;
    min-height: 100vh;
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.logo {
    width: 100px;
    margin: 0 10px;
}

h1 {
    font-size: 2.5em;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    margin-bottom: 20px; /* Añade un margen inferior para separar del footer */
}


/* Tipografía para títulos */
h1, h2, h3, h4, h5, .modal-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 2.5em;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
    font-weight: 700;
    margin-bottom: 20px;
}


input, button {
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
}

input {
    width: 200px;
    outline: none;
}

button {
    background: #005f99;
    color: white;
    cursor: pointer;
}

button:hover {
    background: #004d80;
}
/* Estilos mejorados para el resultado - versión con animaciones y efectos */
#resultado {
    display: none;
    margin: 25px auto;
    font-weight: bold;
    font-size: 1.2em;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.4), rgba(0, 150, 199, 0.2));
    padding: 22px;
    border-radius: 15px;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.35),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
    text-align: left;
    border-left: 5px solid #f8d210;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 90%;
    position: relative;
    overflow: hidden;
    animation: slideUp 0.5s forwards, borderPulse 4s infinite alternate;
}

@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes borderPulse {
    0% { border-left-color: #f8d210; }
    100% { border-left-color: #ffe066; border-left-width: 6px; }
}

/* Efecto de agua en movimiento en el fondo */
#resultado::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle at 50% 100%, 
            rgba(255, 255, 255, 0.2) 0%, 
            rgba(255, 255, 255, 0) 60%
        );
    z-index: -1;
    opacity: 0.6;
    animation: agua 8s infinite linear;
}

@keyframes agua {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Estilos para las etiquetas dentro del resultado */
#resultado .etiqueta {
    text-decoration: none;
    font-weight: bold;
    color: #72C1E6;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease, transform 0.3s ease;
}

#resultado .etiqueta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #72C1E6, transparent);
    transition: width 0.3s ease;
    transform-origin: left;
}

#resultado > div:hover .etiqueta {
    color: #9fdcf5;
    transform: translateX(2px);
}

#resultado > div:hover .etiqueta::after {
    width: 110%;
}

/* Estilos para los valores dentro del resultado */
#resultado .valor {
    font-weight: normal;
    color: #f8f8f8;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

#resultado > div:hover .valor {
    color: white;
}

/* Separador entre elementos */
#resultado .separador {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0));
    margin: 12px 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

#resultado .separador::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2),
        transparent);
    animation: separadorBrillo 4s infinite ease-in-out;
}

@keyframes separadorBrillo {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* Nota al pie destacada */
#resultado .nota {
    font-style: italic;
    font-size: 1em;
    color: #f8d210;
    text-align: center;
    margin-top: 18px;
    padding: 10px;
    background: rgba(248, 210, 16, 0.1);
    border-radius: 8px;
    border: 1px dashed rgba(248, 210, 16, 0.5);
    font-weight: bold;
    animation: pulse 2s infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 rgba(248, 210, 16, 0); }
    100% { box-shadow: 0 0 10px rgba(248, 210, 16, 0.5); }
}

#resultado .nota i {
    animation: latido 1.5s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Íconos para cada sección */
.resultado-icono {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    color: #ffffff;
    animation: aparecer 0.5s backwards;
    transition: transform 0.3s ease;
}

@keyframes aparecer {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Retraso escalonado para los iconos */
#resultado > div:nth-child(1) .resultado-icono { animation-delay: 0.2s; }
#resultado > div:nth-child(3) .resultado-icono { animation-delay: 0.3s; }
#resultado > div:nth-child(5) .resultado-icono { animation-delay: 0.4s; }
#resultado > div:nth-child(7) .resultado-icono { animation-delay: 0.5s; }
#resultado > div:nth-child(9) .resultado-icono { animation-delay: 0.6s; }

#resultado > div:hover .resultado-icono {
    transform: rotate(10deg) scale(1.2);
}

/* Botón Ver Historial destacado */
#btnVerHistorial {
    display: none;
    background-color: #f8d210;
    color: #000;
    margin-top: 20px;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(248, 210, 16, 0.3);
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    animation: aparecer 0.5s forwards 0.8s;
    opacity: 0;
}

#btnVerHistorial:hover {
    background-color: #ffda36;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(248, 210, 16, 0.4);
}

#btnVerHistorial:active {
    transform: translateY(1px);
}

#btnVerHistorial::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#btnVerHistorial:hover::after {
    opacity: 1;
    animation: girarBrillo 2s infinite linear;
}

@keyframes girarBrillo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animación para filas de información */
#resultado > div {
    animation: filaAparecer 0.5s backwards;
}

@keyframes filaAparecer {
    0% { transform: translateX(-15px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

#resultado > div:nth-child(1) { animation-delay: 0.1s; }
#resultado > div:nth-child(2) { animation-delay: 0.15s; }
#resultado > div:nth-child(3) { animation-delay: 0.2s; }
#resultado > div:nth-child(4) { animation-delay: 0.25s; }
#resultado > div:nth-child(5) { animation-delay: 0.3s; }
#resultado > div:nth-child(6) { animation-delay: 0.35s; }
#resultado > div:nth-child(7) { animation-delay: 0.4s; }
#resultado > div:nth-child(8) { animation-delay: 0.45s; }
#resultado > div:nth-child(9) { animation-delay: 0.5s; }
#resultado > div:nth-child(10) { animation-delay: 0.55s; }
#resultado > div.nota { animation-delay: 0.7s; }

/* Estilo mejorado para el botón de refresh */
.refresh-btn {
    background: rgba(0, 95, 153, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: white;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

.refresh-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.refresh-btn:hover {
    background: rgba(0, 119, 182, 0.4);
    color: #ffffff;
    transform: rotate(180deg) scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 15px rgba(0, 119, 182, 0.4), 
                0 0 15px rgba(255, 255, 255, 0.2);
}

.refresh-btn:hover::before {
    opacity: 1;
    animation: pulse-light 2s infinite alternate;
}

@keyframes pulse-light {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.3); opacity: 0.5; }
}

.refresh-btn:active {
    transform: rotate(180deg) scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.refresh-btn i {
    transition: all 0.3s ease;
}

.refresh-btn:hover i {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* Para dispositivos móviles */
@media (max-width: 480px) {
    .refresh-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
        margin-top: 8px;
    }
    
    .botones-accion {
        flex-direction: row;
        gap: 15px;
        margin-top: 15px;
    }
}

/* Estilos corregidos para el footer - soluciona el problema de visualización */
footer {
    width: 100%;
    text-align: center;
    padding: 30px 20px 25px;
    background: linear-gradient(135deg, #005f99, #0077B6);
    font-size: 0.9em;
    margin-top: 40px;
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    /* Asegurando que el footer sea parte del flujo normal y no esté fijo */
    position: relative;
    bottom: auto;
    /* Eliminar cualquier altura fija que pueda causar problemas */
    height: auto;
    min-height: auto;
    /* Corregir overflow para que el contenido completo sea visible */
    overflow: visible;
}

.footer-info {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.footer-info p {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.9);
}

/* Separador simplificado */
.footer-separator {
    width: 60%;
    height: 2px;
    margin: 0 auto;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
    border: none;
}

/* Iconos de redes sociales */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 5px 0;
    flex-wrap: wrap;
}

.social-icons a {
    text-decoration: none;
    color: white;
    font-size: 1.5em;
    transition: all 0.3s ease;
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

/* Efectos hover para los iconos */
.social-icons a:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Animaciones para los iconos de redes sociales */
.social-icons a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease;
}

.social-icons a:hover::before {
    opacity: 1;
    transform: scale(1.5);
    animation: pulseLight 2s infinite;
}

@keyframes pulseLight {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}

/* Animaciones específicas para cada ícono */
.social-icons a:nth-child(1):hover i { color: #2618f2; animation: bounce 0.8s; } /* Facebook */
.social-icons a:nth-child(2):hover i { color: #00ffea; animation: wiggle 0.8s; } /* Twitter */
.social-icons a:nth-child(3):hover i { color: #e4407f; animation: bounce 0.8s; } /* Instagram */
.social-icons a:nth-child(4):hover i { color: #ff0000; animation: wiggle 0.8s; } /* YouTube */
.social-icons a:nth-child(5):hover i { color: #000000; animation: bounce 0.8s; } /* TikTok */
.social-icons a:nth-child(6):hover i { color: #3cff00; animation: wiggle 0.8s; } /* WhatsApp */

/* Animaciones para iconos */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Sección de créditos */
.footer-credits {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 10px;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Estilos para destacar los teléfonos */
.phone-number {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

/* Corregir la estructura HTML y del body para asegurar que el footer se vea completo */
html, body {
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    /* Asegurar que haya espacio suficiente para el footer */
    padding-bottom: 0;
    margin-bottom: 0;
    /* Evitar cualquier desbordamiento que pueda cortar el contenido */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Corregir contenedor principal para que no interfiera con el footer */
.container {
    flex: 1 0 auto; /* Permitir que crezca pero no se encoja */
    margin-bottom: 0; /* Eliminar margen que podría causar problemas */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
    }
    
    .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 1.4em;
    }
    
    .footer-separator {
        width: 80%;
    }

    /* Asegurar visualización completa en móviles */
    footer {
        margin-top: 30px;
        padding-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    
    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 1.3em;
    }

    /* Reducir padding en móviles para evitar problemas de espacio */
    footer {
        padding: 20px 15px 15px;
    }
}

.social-icons a {
    text-decoration: none;
    margin: 0 10px;
    color: white;
    font-size: 1.5em;
    transition: 0.3s;
}

.social-icons a:hover {
    color: #72C1E6;
}

#loading {
    display: none; /* Oculta el spinner inicialmente */
    color: yellow;
    font-weight: bold;
}

.historial-item {
    cursor: pointer;
    color: #0077B6;
    text-decoration: none !important;
    margin: 5px 0;
}

.historial-item:hover {
    color: #005f99;
}

#btnVerHistorial {
    display: none; /* Ocultar inicialmente */
    background-color: #28a745; /* Verde suave */
    color: white;
    margin-top: 20px;
}

#btnVerHistorial:hover {
    background-color: #218838; /* Verde más oscuro al pasar el mouse */
}

.btn-close-custom {
    background-color: #28a745; /* Verde suave */
    color: white;
    border: none;
}

.btn-close-custom:hover {
    background-color: #218838; /* Verde más oscuro al pasar el mouse */
}

.btn-borrar-historial {
    background-color: #dc3545; /* Rojo para el botón de borrar */
    color: white;
    margin-top: 10px;
}

.btn-borrar-historial:hover {
    background-color: #c82333; /* Rojo más oscuro al pasar el mouse */
}

/* Estilos para la pantalla de carga */
/* Estilos para la pantalla de carga - versión que bloquea todo */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Z-index muy alto para estar por encima de todo */
    /* Bloquear interacciones */
    pointer-events: all;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#loading-screen img {
    width: 250px;
    height: 250px;
    /* Prevenir que la imagen sea seleccionable */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Clase para bloquear el body durante la carga */
body.loading {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* Bloquear scrolling en el HTML también */
html.loading {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Estilos responsivos para adaptación a dispositivos móviles */

/* Media query para tablets y dispositivos medianos */
@media (max-width: 768px) {
    /* Ajustes generales */
    html, body {
        padding: 15px 10px;
    }
    
    h1 {
        font-size: 2em;
    }
    
    h2 {
        font-size: 1.5em;
    }
    
    /* Ajustes para el contenedor principal */
    .container {
        padding: 15px;
        width: 95%;
        max-width: none;
    }
    
    /* Ajuste para los logos */
    .logo {
        width: 80px;
    }
    
    /* Ajuste para el resultado */
    #resultado {
        max-width: 95%;
        padding: 18px;
        font-size: 1.1em;
    }

    /* Ajuste para el botón de historial */
    #btnVerHistorial {
        width: 80%;
        padding: 10px;
    }
}

/* Media query para smartphones y dispositivos pequeños */
@media (max-width: 480px) {
    /* Ajustes generales */
    html, body {
        padding: 10px 5px;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    h2 {
        font-size: 1.3em;
        margin-bottom: 15px;
    }
    
    /* Ajustes para el footer */
    footer {
        padding: 15px 10px;
        font-size: 0.8em;
    }
    
    /* Ajustes para logos en versión móvil */
    .logo-container {
        flex-direction: row;
        margin-bottom: 15px;
    }
    
    .logo {
        width: 60px;
        margin: 0 5px;
    }
    
    /* Ajustes para los campos de entrada */
    input {
        width: 80%;
    }
    
    .form-control {
        width: 100% !important; /* Sobrescribir clases de Bootstrap */
    }
    
    /* Ajustes para el resultado en móvil */
    #resultado {
        padding: 15px;
        font-size: 1em;
        margin: 20px auto;
        max-width: 100%;
    }
    
    #resultado .etiqueta {
        display: block;
        margin-bottom: 5px;
    }
    
    #resultado .valor {
        display: block;
        padding-left: 10px;
    }
    
    /* Ajuste para los separadores */
    #resultado .separador {
        margin: 10px 0;
    }
    
    /* Ajustes para la nota */
    #resultado .nota {
        font-size: 0.9em;
        padding: 8px;
    }
    
    /* Iconos más pequeños en móvil */
    .resultado-icono {
        width: 16px;
    }
    
    /* Ajustes para botones en móvil */
    button {
        padding: 8px 16px;
    }
    
    #btnVerHistorial {
        width: 100%;
        padding: 10px;
        font-size: 0.85em;
    }
    
    /* Ajustes para modales en móvil */
    .modal-dialog {
        margin: 10px;
    }
    
    .modal-image-container img:first-child {
        width: 100%;
    }
    
    .modal-image-container img:last-child {
        width: 70%;
    }
    
    /* Ajustes para los iconos sociales */
    .social-icons a {
        font-size: 1.3em;
        margin: 0 8px;
    }
}

/* Media query para ajustes de pantallas muy pequeñas */
@media (max-width: 360px) {
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.2em;
    }
    
    .logo {
        width: 50px;
    }
    
    /* Para dispositivos muy pequeños, optimizamos aún más el espacio */
    #resultado {
        padding: 12px;
        font-size: 0.95em;
    }
    
    #resultado .etiqueta::after {
        height: 1px;
    }
    
    footer {
        font-size: 0.75em;
    }
}

/* Ajustes específicos para orientación horizontal en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reducir espaciado vertical para aprovechar la pantalla */
    .logo-container {
        margin-bottom: 10px;
    }
    
    .logo {
        width: 50px;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    
    .container {
        padding: 10px;
    }
    
    #resultado {
        margin: 15px auto;
    }
    
    footer {
        padding: 10px;
    }
}

/* Asegurar que la animación de aparición sea más suave en móviles */
@media (prefers-reduced-motion: reduce) {
    #resultado, #btnVerHistorial, .resultado-icono, #resultado > div {
        animation-duration: 0.3s !important;
    }
    
    @keyframes agua {
        0% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(0); }
    }
}





/* Estilos mejorados para el botón de Buscar con animaciones más visibles */
.btn-primary, 
button[onclick="buscarClienteYReferencia()"] {
    background-color: #005f99; /* Mantener color azul original */
    color: white;
    padding: 12px 25px; /* Padding ligeramente mayor */
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 95, 153, 0.3);
    font-weight: bold;
    border: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Transición más pronunciada */
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    min-width: 120px; /* Asegurar que el botón tenga un ancho mínimo */
    animation: btnPulse 2s infinite alternate; /* Animación de pulso permanente */
}

/* Animación de pulso para el botón */
@keyframes btnPulse {
    0% { box-shadow: 0 5px 15px rgba(0, 95, 153, 0.3); }
    100% { box-shadow: 0 5px 20px rgba(0, 95, 153, 0.6), 0 0 15px rgba(255, 255, 255, 0.2); }
}

/* Efecto de brillo de borde */
.btn-primary::before,
button[onclick="buscarClienteYReferencia()"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #0077B6, #72C1E6, #0077B6);
    background-size: 200% 200%;
    border-radius: 32px;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-primary:hover::before,
button[onclick="buscarClienteYReferencia()"]:hover::before {
    opacity: 1;
}

.btn-primary:hover,
button[onclick="buscarClienteYReferencia()"]:hover {
    background-color: #0077B6; /* Azul ligeramente más brillante al hover */
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 95, 153, 0.5);
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Sutil resplandor al texto */
}

.btn-primary:active,
button[onclick="buscarClienteYReferencia()"]:active {
    transform: translateY(2px) scale(0.98);
}

/* Efecto de onda al hacer clic */
.btn-primary::after,
button[onclick="buscarClienteYReferencia()"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1) translate(-50%, -50%);
    transform-origin: 50% 50%;
}

.btn-primary:active::after,
button[onclick="buscarClienteYReferencia()"]:active::after {
    animation: ripple 0.6s ease-out;
    opacity: 0.3;
}

@keyframes ripple {
    0% { transform: scale(0) translate(-50%, -50%); opacity: 0.5; }
    100% { transform: scale(20) translate(-50%, -50%); opacity: 0; }
}

/* Ajuste responsivo para los botones */
@media (max-width: 480px) {
    .btn-primary,
    button[onclick="buscarClienteYReferencia()"] {
        padding: 10px 20px;
        min-width: 100px;
    }
}

/* Estilos avanzados con diseño visual mejorado */

/* Estilo para el título principal */
.titulo-referencia {
    position: relative;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

.titulo-referencia::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, transparent, yellow, transparent);
    animation: expandir 2s infinite alternate;
}

@keyframes expandir {
    from { width: 80px; opacity: 0.7; }
    to { width: 150px; opacity: 1; }
}

/* Mantenemos el contenedor principal como está en el original */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    margin-bottom: 20px;
    overflow: hidden;
}

/* Panel principal con efectos visuales */
.panel-principal {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 25px 0;
    border-radius: 8px;
    z-index: 1;
}


/* Sección de búsqueda con mejor espaciado */
.seccion-busqueda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
    position: relative;
}

/* Etiqueta decorada */
.etiqueta-decorada {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 25px;
    padding: 0 20px;
}

.linea-decorativa {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.etiqueta-texto {
    padding: 0 15px;
    text-align: center;
}

.etiqueta-texto label {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.subtitulo-predio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.texto-amarillo {
    color: yellow;
    font-weight: normal;
    font-size: 16px;
    /* Se eliminó la animación que causaba el efecto neón */
}

/* Tooltip para el ícono de info */
.tooltip-info {
    position: relative;
    display: inline-block;
}

.tooltip-info .tooltip-text {
    visibility: hidden;
    width: 150px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    pointer-events: none;
}

.tooltip-info .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.tooltip-info:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Ícono de información mejorado */
.info-icon {
    color: yellow;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
}

.info-icon:hover {
    color: white;
    background: rgba(173, 255, 47, 0.7);
    transform: scale(1.1);
}

/* Campo de búsqueda mejorado */
.campo-busqueda-avanzado {
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
}

.marco-input {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2),
                inset 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    overflow: hidden; /* Asegura que nada sobresalga de los bordes */
}

.marco-input:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3),
                inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Íconos dentro del campo de búsqueda */
.icono-busqueda {
    position: absolute;
    left: 15px;
    color: #005f99;
    font-size: 18px;
    opacity: 0.8;
    z-index: 2;
}

.icono-limpiar {
    position: absolute;
    right: 15px;
    color: #6c757d;
    font-size: 16px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
}

.icono-limpiar:hover {
    opacity: 1;
    color: #dc3545;
}

/* Campo de entrada mejorado */
/* Centrado perfecto del texto en el campo de búsqueda */
#predio {
    height: 45px;
    padding: 0 40px; /* Padding horizontal solamente */
    background-color: transparent;
    border: none;
    width: 100%;
    font-size: 18px;
    color: #333;
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 0;
    
    /* Centrando verticalmente el texto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Reset de propiedades que podrían estar afectando */
    line-height: normal;
    margin: 0;
    position: static;
    top: auto;
}

/* Cuando el input está enfocado, cambia el estilo del contenedor */
#predio:focus ~ .marco-input,
.marco-input:has(#predio:focus) {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Elimina el borde interno del input */
#predio:focus { 
    outline: none; 
    border-color: transparent; 
    box-shadow: none; 
}

#predio::placeholder {
    color: #adb5bd;
    opacity: 0.7;
}

/* Botones de acción */
.botones-accion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

/* Mantener estilos originales de los botones */
.btn-primary {
    background: #005f99;
    color: white;
    border: none;
}

.btn-primary:hover {
    background: #004d80;
}



/* Sección de resultados - restaurada al estilo original */
.seccion-resultados {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Restaurar los estilos originales del resultado */
#resultado {
    display: none;
    margin: 25px auto;
    font-weight: bold;
    font-size: 1.2em;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.4), rgba(0, 150, 199, 0.2));
    padding: 22px;
    border-radius: 15px;
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.35),
        inset 0 2px 10px rgba(255, 255, 255, 0.1);
    text-align: left;
    border-left: 5px solid #f8d210;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-width: 90%;
    position: relative;
    overflow: hidden;
    animation: slideUp 0.5s forwards, borderPulse 4s infinite alternate;
}

/* Restaurar animaciones originales */
@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes borderPulse {
    0% { border-left-color: #f8d210; }
    100% { border-left-color: #ffe066; border-left-width: 6px; }
}

/* Efecto de agua en movimiento en el fondo */
#resultado::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle at 50% 100%, 
            rgba(255, 255, 255, 0.2) 0%, 
            rgba(255, 255, 255, 0) 60%
        );
    z-index: -1;
    opacity: 0.6;
    animation: agua 8s infinite linear;
}

@keyframes agua {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Estilos para las etiquetas dentro del resultado */
#resultado .etiqueta {
    text-decoration: none;
    font-weight: bold;
    color: #72C1E6;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease, transform 0.3s ease;
}

#resultado .etiqueta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #72C1E6, transparent);
    transition: width 0.3s ease;
    transform-origin: left;
}

#resultado > div:hover .etiqueta {
    color: #9fdcf5;
    transform: translateX(2px);
}

#resultado > div:hover .etiqueta::after {
    width: 110%;
}

/* Estilos para los valores dentro del resultado */
#resultado .valor {
    font-weight: normal;
    color: #f8f8f8;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

#resultado > div:hover .valor {
    color: white;
}

/* Separador entre elementos */
#resultado .separador {
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0));
    margin: 12px 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

#resultado .separador::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2),
        transparent);
    animation: separadorBrillo 4s infinite ease-in-out;
}

@keyframes separadorBrillo {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* Nota al pie destacada */
#resultado .nota {
    font-style: italic;
    font-size: 1em;
    color: #f8d210;
    text-align: center;
    margin-top: 18px;
    padding: 10px;
    background: rgba(248, 210, 16, 0.1);
    border-radius: 8px;
    border: 1px dashed rgba(248, 210, 16, 0.5);
    font-weight: bold;
    animation: pulse 2s infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 rgba(248, 210, 16, 0); }
    100% { box-shadow: 0 0 10px rgba(248, 210, 16, 0.5); }
}

#resultado .nota i {
    animation: latido 1.5s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}

@keyframes latido {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Íconos para cada sección */
.resultado-icono {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    color: #ffffff;
    animation: aparecer 0.5s backwards;
    transition: transform 0.3s ease;
}

@keyframes aparecer {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Retraso escalonado para los iconos */
#resultado > div:nth-child(1) .resultado-icono { animation-delay: 0.2s; }
#resultado > div:nth-child(3) .resultado-icono { animation-delay: 0.3s; }
#resultado > div:nth-child(5) .resultado-icono { animation-delay: 0.4s; }
#resultado > div:nth-child(7) .resultado-icono { animation-delay: 0.5s; }
#resultado > div:nth-child(9) .resultado-icono { animation-delay: 0.6s; }

#resultado > div:hover .resultado-icono {
    transform: rotate(10deg) scale(1.2);
}

/* Animación para filas de información */
#resultado > div {
    animation: filaAparecer 0.5s backwards;
}

@keyframes filaAparecer {
    0% { transform: translateX(-15px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

#resultado > div:nth-child(1) { animation-delay: 0.1s; }
#resultado > div:nth-child(2) { animation-delay: 0.15s; }
#resultado > div:nth-child(3) { animation-delay: 0.2s; }
#resultado > div:nth-child(4) { animation-delay: 0.25s; }
#resultado > div:nth-child(5) { animation-delay: 0.3s; }
#resultado > div:nth-child(6) { animation-delay: 0.35s; }
#resultado > div:nth-child(7) { animation-delay: 0.4s; }
#resultado > div:nth-child(8) { animation-delay: 0.45s; }
#resultado > div:nth-child(9) { animation-delay: 0.5s; }
#resultado > div:nth-child(10) { animation-delay: 0.55s; }
#resultado > div.nota { animation-delay: 0.7s; }

/* Sección de historial */
.seccion-historial {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Restaurar estilo original del botón Ver Historial */
#btnVerHistorial {
    display: none; /* Se mostrará mediante JavaScript cuando sea necesario */
    background-color: #28a745; /* Verde original */
    color: white;
    margin-top: 20px;
}

#btnVerHistorial:hover {
    background-color: #218838; /* Verde oscuro original */
}

#btnVerHistorial i {
    font-size: 1.1em;
}

#loading {
    color: yellow;
    font-weight: bold;
    margin: 10px 0;
    display: none;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .campo-busqueda-avanzado {
        width: 90%;
    }
    
    .etiqueta-decorada {
        padding: 0 10px;
    }
}

@media (max-width: 576px) {
    .etiqueta-texto label {
        font-size: 16px;
    }
    
    .texto-amarillo {
        font-size: 14px;
    }
    
    #predio {
        font-size: 16px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .botones-accion {
        flex-direction: column;
        gap: 10px;
    }
    
    .refresh-btn {
        margin-top: 0;
    }
    
    .campo-busqueda-avanzado {
        width: 100%;
    }
    
    .linea-decorativa {
        display: none;
    }
}


/* Estilo para el marco cuando el input está enfocado */
.marco-input.input-focused {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Elimina el borde interno del input */
#predio:focus { 
    outline: none; 
    border-color: transparent; 
    box-shadow: none; 
}


/* Estilos para un modal de historial más animado y atractivo */

/* Fondo del modal con efecto de agua */
.modal-backdrop.show {
    opacity: 0.7;
    background: linear-gradient(135deg, #004a77, #0077B6);
    animation: backgroundWave 10s infinite alternate ease-in-out;
}

@keyframes backgroundWave {
    0% { opacity: 0.6; }
    50% { opacity: 0.7; }
    100% { opacity: 0.8; }
}

/* Animación de entrada del modal */
.modal.fade .modal-dialog {
    transform: scale(0.8) translateY(-20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Contenido del modal mejorado */
.historial-modal-content {
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 119, 182, 0.3);
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    animation: modalGlow 3s infinite alternate;
}

@keyframes modalGlow {
    0% { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 119, 182, 0.3); }
    100% { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 119, 182, 0.5); }
}

/* Encabezado del modal con ondas de agua */
.historial-header {
    background: linear-gradient(135deg, #005f99, #0077B6);
    color: white;
    border-bottom: none;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.historial-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,192L48,181.3C96,171,192,149,288,149.3C384,149,480,171,576,186.7C672,203,768,213,864,218.7C960,224,1056,224,1152,213.3C1248,203,1344,181,1392,170.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
    animation: waveAnimation 15s linear infinite;
}

@keyframes waveAnimation {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}

.historial-title-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.historial-icon {
    font-size: 1.8em;
    color: rgba(255, 255, 255, 0.9);
    animation: rotateIcon 8s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

@keyframes rotateIcon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.historial-header .modal-title {
    font-weight: 700;
    font-size: 1.5em;
    margin: 0;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: titlePulse 3s infinite alternate;
}

@keyframes titlePulse {
    0% { text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
    100% { text-shadow: 0 2px 15px rgba(255, 255, 255, 0.5); }
}

/* Botón de cerrar rediseñado */
/* Reemplaza todo el código CSS del botón X con esto */
.historial-header .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    border: none;
    z-index: 5;
}

.historial-header .btn-close::before, 
.historial-header .btn-close::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 2px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.historial-header .btn-close::before {
    transform: rotate(45deg);
}

.historial-header .btn-close::after {
    transform: rotate(-45deg);
}

.historial-header .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.historial-header .btn-close:hover::before,
.historial-header .btn-close:hover::after {
    background-color: #ff3b5c;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* Cuerpo del modal con más estilo */
.historial-body {
    padding: 25px;
    background-color: white;
    background-image: linear-gradient(to bottom, #f8f9fa, white);
    position: relative;
}

.historial-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    z-index: 1;
}

.historial-intro {
    text-align: center;
    margin-bottom: 20px;
    color: #495057;
    font-size: 1em;
    font-weight: 500;
    padding: 0 15px;
    animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.historial-counter {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #6c757d;
    padding: 8px 20px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: 30px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
    border: 1px solid rgba(0, 119, 182, 0.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.5s ease-out 0.1s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.historial-counter #historial-count {
    font-weight: bold;
    color: #0077B6;
    font-size: 1.2em;
    position: relative;
    padding: 0 5px;
}

.historial-counter #historial-count::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #0077B6, transparent);
    animation: widthPulse 2s infinite alternate;
}

@keyframes widthPulse {
    from { width: 50%; left: 25%; }
    to { width: 100%; left: 0; }
}

/* Contenedor de items del historial */
.historial-container {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 15px;
    border: 1px solid #e9ecef;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.5s ease-out 0.2s both;
    position: relative;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Barra de desplazamiento personalizada */
.historial-container::-webkit-scrollbar {
    width: 8px;
}

.historial-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.historial-container::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #0077B6, #00a8ff);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

.historial-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #005f99, #0077B6);
}

/* Items del historial con más animación */
.historial-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.historial-item {
    background-color: white;
    padding: 12px 18px;
    border-radius: 10px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-left: 4px solid #0077B6;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.historial-item::before {
    content: '\F47D'; /* Código de Bootstrap Icons para search */
    font-family: 'bootstrap-icons';
    margin-right: 12px;
    color: #0077B6;
    font-size: 1em;
    transition: all 0.3s ease;
}

.historial-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 119, 182, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: -1;
}

.historial-item:hover {
    background-color: #f0f8ff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px) scale(1.02);
    border-left-width: 6px;
}

.historial-item:hover::before {
    transform: scale(1.2);
    color: #00a8ff;
}

.historial-item:hover::after {
    transform: translateX(0) scaleX(1);
}

.historial-item:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Mensaje cuando no hay historial */
.historial-empty {
    text-align: center;
    padding: 30px 20px;
    color: #6c757d;
    display: none; /* Se mostrará mediante JavaScript cuando sea necesario */
    animation: fadeIn 0.5s ease;
}

.historial-empty i {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.3;
    animation: searchPulse 3s infinite alternate;
}

@keyframes searchPulse {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.5; }
}

.historial-empty p {
    font-size: 1.1em;
    margin: 0;
    color: #6c757d;
}

/* Pie del modal */
.historial-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 18px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.historial-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 119, 182, 0.2), transparent);
    animation: glowLine 4s infinite alternate;
}

@keyframes glowLine {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Botón para borrar historial */
.btn-borrar-historial {
    background: linear-gradient(45deg, #dc3545, #ff5363);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.95em;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-borrar-historial::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-borrar-historial:hover {
    background: linear-gradient(45deg, #c82333, #e74c3c);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4);
    transform: translateY(-2px);
}

.btn-borrar-historial:hover::before {
    opacity: 1;
    animation: rotateLight 2s infinite linear;
}

@keyframes rotateLight {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-borrar-historial:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.4);
}

.btn-borrar-historial i {
    font-size: 1.1em;
    animation: shakeIcon 5s infinite;
    transform-origin: center;
}

@keyframes shakeIcon {
    0%, 80%, 100% { transform: rotate(0); }
    85% { transform: rotate(10deg); }
    90% { transform: rotate(-10deg); }
    95% { transform: rotate(5deg); }
}

/* Botón cerrar */
.btn-secondary {
    background: linear-gradient(45deg, #6c757d, #495057);
    border: none;
    color: white;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(45deg, #5a6268, #343a40);
    box-shadow: 0 6px 15px rgba(108, 117, 125, 0.4);
    transform: translateY(-2px);
}

.btn-secondary:hover::before {
    opacity: 1;
}

.btn-secondary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(108, 117, 125, 0.4);
}

/* Responsive */
@media (max-width: 576px) {
    .historial-title-container {
        flex-direction: column;
        gap: 5px;
    }
    
    .historial-icon {
        font-size: 1.5em;
    }
    
    .historial-header .modal-title {
        font-size: 1.3em;
    }
    
    .historial-container {
        max-height: 200px;
    }
    
    .historial-item {
        padding: 10px 15px;
        font-size: 0.95em;
    }
    
    .historial-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-borrar-historial, 
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}




/* Estilos para el modal de información mejorado */
.info-modal-content {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.info-modal-header {
    background: linear-gradient(135deg, #0077B6, #005f99);
    border-bottom: none;
    padding: 20px 25px;
    position: relative;
    overflow: hidden;
}

.info-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,160L48,144C96,128,192,96,288,90.7C384,85,480,107,576,128C672,149,768,171,864,176C960,181,1056,171,1152,144C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.info-modal-header .header-content {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 auto;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.info-header-icon {
    font-size: 28px;
    color: #f8d210;
    filter: drop-shadow(0 0 5px rgba(248, 210, 16, 0.6));
}

.info-modal-header .modal-title {
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    padding-right: 60px; /* Espacio para el botón de cerrar */
    line-height: 1.3;
    word-wrap: break-word;
}

/* Ajustes responsivos para el título */
@media (max-width: 768px) {
    .info-modal-header .modal-title {
        font-size: 1.2em;
        padding-right: 50px; /* Menos espacio en móviles */
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .info-modal-header .modal-title {
        font-size: 1.1em;
        padding-right: 45px;
        line-height: 1.1;
    }
}
.info-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    opacity: 0.8;
}

.info-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
    opacity: 1;
}

.info-modal-body {
    background-color: #f8f9fa;
    padding: 0;
}

/* Estilos para las pestañas */
.info-tabs {
    background-color: #e9ecef;
    padding: 10px 10px 0;
    border-bottom: none;
}

.info-tabs .nav-link {
    color: #495057;
    border-radius: 8px 8px 0 0;
    padding: 12px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-bottom: none;
    transition: all 0.3s ease;
}

.info-tabs .nav-link i {
    font-size: 18px;
}

.info-tabs .nav-link.active {
    color: #0077B6;
    background-color: white;
    border-color: #dee2e6;
}

.info-tabs .nav-link:hover:not(.active) {
    background-color: rgba(0, 119, 182, 0.05);
    color: #0077B6;
}

.info-tab-content {
    padding: 25px;
}

/* Estilos para las tarjetas de información */
.info-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    border-left: 4px solid #0077B6;
    transition: all 0.3s ease;
}

.info-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.info-card-header {
    background: linear-gradient(to right, rgba(0, 119, 182, 0.1), transparent);
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}

.info-step {
    display: inline-block;
    background-color: #0077B6;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.info-card-header h6 {
    margin: 0;
    color: #0077B6;
    font-size: 18px;
    font-weight: 700;
}

.info-card-body {
    padding: 20px;
}

.info-card-body p {
    color: #495057;
    margin-bottom: 15px;
    font-size: 15px;
}

.info-tip {
    background-color: #fff8e1;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 3px solid #f8d210;
}

.info-tip i {
    color: #f8d210;
    font-size: 18px;
    margin-top: 2px;
}

.info-tip span {
    color: #664d03;
    font-size: 14px;
}

/* Estilos para las imágenes */
.image-highlight {
    position: relative;
    background-color: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.image-highlight:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.info-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Elimina o comenta este código existente */
/* Elimina el estilo anterior de image-indicator */
.image-indicator {
    display: none; /* Simplemente ocultamos el elemento anterior */
}

/* Nuevo botón de zoom optimizado para todas las pantallas */
.zoom-button {
    position: absolute;
    top: 10px;           /* Cambiado a la esquina superior */
    right: 10px;
    width: 36px;
    height: 36px;
    background-color: rgba(0, 119, 182, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    z-index: 10;
}

.zoom-button:hover {
    background-color: rgba(0, 95, 153, 1);
    transform: scale(1.1);
}

.zoom-button:active {
    transform: scale(0.95);
}

/* Estilo para la imagen con zoom */
.image-highlight.zoomed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* Indica que se puede hacer clic para cerrar */
}

/* Mensaje indicando cómo cerrar */
.image-highlight.zoomed::after {
    content: "Toca en cualquier lugar para cerrar";
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 14px;
    opacity: 0.7;
}

.image-highlight.zoomed img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    cursor: default; /* Para que el cursor no sea "pointer" sobre la imagen */
    z-index: 10000; /* Para que esté por encima del fondo clickeable */
}

/* Estilos específicos para móviles */
@media (max-width: 768px) {
    .zoom-button {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .image-highlight.zoomed img {
        max-width: 95%;
        max-height: 95%;
    }
    
    .image-highlight.zoomed::after {
        bottom: 15px;
        font-size: 12px;
    }
}


/* Lista con íconos */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #495057;
    font-size: 15px;
}

.info-list li i {
    color: #28a745;
    font-size: 16px;
}

/* Sección de información adicional */
.info-additional {
    margin-top: 30px;
    padding: 0 15px;
}

.info-divider {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.info-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #dee2e6;
}

.info-divider span {
    position: relative;
    background-color: #f8f9fa;
    padding: 0 15px;
    color: #0077B6;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-divider i {
    font-size: 16px;
}

/* Cajas de consejos */
.info-tip-box {
    display: flex;
    align-items: flex-start;
    background-color: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    gap: 15px;
    height: 100%;
    transition: all 0.3s ease;
}

.info-tip-box:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.tip-icon {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.info-tip-box:nth-child(1) .tip-icon {
    color: #0077B6;
}

.info-tip-box:nth-child(2) .tip-icon {
    color: #dc3545;
}

.tip-content h6 {
    margin: 0 0 8px;
    color: #343a40;
    font-size: 16px;
    font-weight: 600;
}

.tip-content p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

/* Footer del modal */
.info-modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 15px 25px;
}

.info-understood-btn {
    background-color: #0077B6;
    border: none;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.info-understood-btn:hover {
    background-color: #005f99;
    transform: translateY(-2px);
}

.info-understood-btn i {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 767px) {
 
    
      .info-tabs {
        padding: 12px 15px 8px;
        gap: 8px;
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* 2 columnas iguales */
        grid-template-rows: auto auto; /* 2 filas */
        justify-items: center; /* Centrar elementos en cada celda */
        align-items: stretch; /* Altura uniforme */
    }
    
    .info-tabs .nav-item {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .info-tabs .nav-link {
        font-size: 11px;
        padding: 8px 6px;
        min-height: 50px; /* Altura uniforme */
        min-width: auto;
        width: 95%; /* Ocupar casi todo el espacio disponible */
        max-width: 130px; /* Límite máximo */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-align: center;
        border-radius: 6px;
        line-height: 1.2;
    }
    
    .info-tabs .nav-link i {
        font-size: 14px;
        flex-shrink: 0;
    }
    
    /* Asegurar que los textos no se desborden */
    .info-tabs .nav-link {
        overflow: hidden;
        word-break: break-word;
        hyphens: auto;
    }
}

/* AJUSTE PARA PANTALLAS MUY PEQUEÑAS */
@media (max-width: 480px) {
    .info-tabs {
        padding: 10px 12px 6px;
        gap: 6px;
    }
    
    .info-tabs .nav-link {
        font-size: 10px;
        padding: 6px 4px;
        min-height: 45px;
        width: 98%;
        max-width: 120px;
    }
    
    .info-tabs .nav-link i {
        font-size: 13px;
    }


    
    .info-card-header h6 {
        font-size: 16px;
    }
    
    .image-highlight {
        margin-top: 20px;
    }
    
    .info-additional {
        margin-top: 20px;
    }
}





/* Estilos minimalistas para el zoom de imagen */
.zoom-pure-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out; /* Indica que se puede hacer clic para cerrar */
}

.zoom-pure-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default; /* Cursor normal sobre la imagen */
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .zoom-pure-image {
        max-width: 95%;
        max-height: 95%;
    }
}

/* Nuevo botón de cierre elegante - mismo diseño en todos los dispositivos */
.custom-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important; /* Forzar visualización */
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100 !important; /* Priorizar sobre otros elementos */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* Anular posibles estilos de Bootstrap */
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

.custom-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.close-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: block !important;
}

.close-icon:before, .close-icon:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 2px;
    top: 50%;
    left: 0;
    transition: all 0.3s ease;
}

.close-icon:before {
    transform: translateY(-50%) rotate(45deg);
}

.close-icon:after {
    transform: translateY(-50%) rotate(-45deg);
}

.custom-close-btn:hover .close-icon:before,
.custom-close-btn:hover .close-icon:after {
    background-color: #f8d210;
    box-shadow: 0 0 8px rgba(248, 210, 16, 0.8);
}

/* Anular cualquier cambio de Bootstrap en dispositivos móviles */
@media (max-width: 767px) {
    .custom-close-btn {
        display: flex !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 100 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Asegurarse de que el botón no sea reemplazado por otra cosa */
    .modal-header .close,
    .modal-header .btn-close {
        display: none !important; /* Ocultar el botón predeterminado de Bootstrap */
    }
}









/* Estilos para botón de copiar referencia */
.btn-copy {
    background: transparent;
    border: none;
    color: #72C1E6;
    font-size: 1.1em;
    cursor: pointer;
    margin-left: 10px;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.btn-copy:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #f8d210;
    transform: scale(1.1);
}

.btn-copy:active {
    transform: scale(0.9);
}

.btn-copy.copied {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.btn-copy.copied i::before {
    content: "\F26B"; /* Código del ícono de check en Bootstrap Icons */
}


/* REEMPLAZA LOS ESTILOS DE .notificacion CON ESTOS CORREGIDOS */

.notificacion {
    position: fixed !important;
    top: 120px !important; /* Más abajo del header (era 20px) */
    right: 20px !important;
    
    /* VERDE MÁS VISIBLE COMO EL ANTERIOR */
    background: rgba(40, 167, 69, 0.95) !important; /* Verde sólido más visible */
    color: white !important;
    
    padding: 12px 20px !important;
    border-radius: 8px !important;
    box-shadow: 
        0 8px 25px rgba(40, 167, 69, 0.6), /* Sombra más intensa */
        0 4px 10px rgba(0, 0, 0, 0.3) !important;
    opacity: 0 !important;
    transform: translateY(-20px) translateX(20px) scale(0.8) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    
    /* Z-INDEX MUY ALTO */
    z-index: 99999 !important;
    
    font-size: 0.9em !important;
    font-weight: 600 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* Borde más visible */
    backdrop-filter: blur(10px) !important;
    min-width: 200px !important;
    text-align: center !important;
    overflow: hidden !important;
    
    /* FORZAR POSICIÓN */
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 300px !important;
}

/* Efecto de brillo más visible */
.notificacion::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), /* Brillo más intenso */
        transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
}

.notificacion.visible {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

.notificacion.visible::before {
    left: 100% !important;
}

/* Animación mejorada */
@keyframes notificationSlideIn {
    0% {
        opacity: 0 !important;
        transform: translateY(-30px) translateX(30px) scale(0.7) rotate(5deg) !important;
    }
    50% {
        opacity: 0.8 !important;
        transform: translateY(-5px) translateX(-5px) scale(1.05) rotate(-1deg) !important;
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0) translateX(0) scale(1) rotate(0deg) !important;
    }
}

.notificacion.visible {
    animation: notificationSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* AJUSTES RESPONSIVE CON POSICIÓN CORREGIDA */
@media (max-width: 768px) {
    .notificacion {
        top: 100px !important; /* Ajustado para móviles */
        right: 15px !important;
        left: 15px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: calc(100% - 30px) !important;
        font-size: 0.85em !important;
        padding: 10px 16px !important;
    }
}

@media (max-width: 480px) {
    .notificacion {
        top: 80px !important; /* Más arriba en pantallas pequeñas */
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100% - 20px) !important;
        font-size: 0.8em !important;
        padding: 8px 14px !important;
    }
}

/* AJUSTE ESPECIAL CUANDO EL HEADER ESTÁ STICKY */
.capas-header.sticky ~ * .notificacion,
.capas-header.sticky + * .notificacion {
    top: 90px !important; /* Cuando el header está sticky, más abajo */
}

/* OVERRIDE PARA EVITAR CONFLICTOS */
.notificacion {
    font-family: inherit !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* Diseño minimalista para la referencia - solo negritas y subrayado con animación mejorada */
#referencia-valor {
    font-weight: 700; /* Extra bold para los números */
    font-size: 1.05em;
    color: #d4f0c4; /* Verde claro para mejor visibilidad */
    background-color: transparent; /* Sin fondo */
    padding: 2px 0;
    margin-left: 5px;
    position: relative;
    transition: all 0.2s ease;
}

/* Subrayado con animación mejorada */
#referencia-valor::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #e7e7e7, #6df0c2, #e7e7e7);
    background-size: 200% 100%;
    animation: subrayado-fluido 1.5s infinite linear;
}

@keyframes subrayado-fluido {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

#referencia-valor:hover::after {
    animation-duration: 0.8s; /* Más rápido al hacer hover */
    background: linear-gradient(90deg, #6df0c2, #e7e7e7, #6df0c2);
}

/* Botón de copiar discreto */
.btn-copy {
    background-color: transparent;
    color: #9be5c9;
    margin-left: 6px;
    width: 24px;
    height: 24px;
}

.btn-copy:hover {
    color: #c0ffdb;
}

/* ESTILOS DEL ENCABEZADO - Con prefijo "capas-" para evitar conflictos */
:root {
    /* Variables específicas para el encabezado con prefijo */
    --capas-green-dark: #1976d2;     /* Azul muy oscuro */
    --capas-green-medium: #1976d2;   /* Azul medio */
    --capas-green-light: #1976d2;    /* Azul claro */
    --capas-green-accent: #1976d2;   /* Azul oscuro */

    --capas-active-bg: rgba(7, 56, 20, 0.6);
    --capas-hover-bg: rgba(6, 46, 17, 0.5);
    --capas-text-primary: #ffffff;
    --capas-shadow: rgba(0, 0, 0, 0.1);
    --capas-shadow-dark: rgba(0, 0, 0, 0.3);
    --capas-bubble-light: rgba(255, 255, 255, 0.15);
    --capas-bubble-green: rgba(170, 255, 200, 0.15);
    --capas-bubble-border: rgba(255, 255, 255, 0.05);
    
    /* Variables de tamaño específicas del encabezado */
    --capas-nav-height: 95px;
    --capas-border-radius: 12px;
    --capas-logo-width: 270px;
    --capas-logo-height: 70px;
    --capas-icon-size: 20px;
    --capas-bubble-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    --capas-nav-shadow: 0 10px 30px var(--capas-shadow);
    
    /* Variables de animación específicas */
    --capas-transition: all 0.3s ease;
    --capas-transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --capas-animation-duration: 0.8s;
    
    /* Variables de espaciado específicas */
    --capas-padding: 20px;
    --capas-menu-gap: 8px;
    --capas-menu-padding: 15px 12px;
}

/* Prevenir desbordamiento horizontal en todo el documento */
.capas-header {
    width: 100%;
    max-width: 100%;
    margin: 0 !important; /* ← SIN MARGEN */
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    transition: all 0.3s ease;
    position: relative;
    z-index: 100;
}

.capas-navbar {
    position: relative;
    height: var(--capas-nav-height);
    display: flex;
    align-items: center;
    overflow: visible;
    border-radius: 3px;
    box-shadow: var(--capas-nav-shadow);
    width: 100% !important; /* ← ANCHO COMPLETO */
    margin: 0 !important; /* ← SIN MARGEN */
    animation: capasNavFadeIn var(--capas-animation-duration) ease-in-out;
    box-sizing: border-box;
}

@keyframes capasNavFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.capas-navbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1976d2 15%, #1976d2 50%, #1976d2 85%);
    z-index: 0;
}

.capas-navbar-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 var(--capas-padding);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.capas-logo {
    display: flex;
    align-items: center;
    width: var(--capas-logo-width);
    height: var(--capas-logo-height);
    transition: var(--capas-transition);
    margin-left: 25px;
    box-sizing: border-box;
}

.capas-logo:hover {
    transform: scale(1.03);
}

.capas-logo-container {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

.capas-logo-image {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Placeholder para cuando el logo no está disponible */
.capas-logo-placeholder {
    display: flex;
    align-items: center;
    color: var(--capas-text-primary);
    font-weight: bold;
    font-size: 20px;
    height: 100%;
}

.capas-menu {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    box-sizing: border-box;
}

.capas-menu-item {
    color: var(--capas-text-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: var(--capas-menu-padding);
    height: var(--capas-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--capas-transition-smooth);
    text-align: center;
    flex-direction: column;
    gap: var(--capas-menu-gap);
    box-sizing: border-box;
}

.capas-menu-item:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--capas-text-primary);
    transition: var(--capas-transition);
    transform: translateX(-50%);
}

.capas-menu-item:hover {
    background-color: var(--capas-hover-bg);
    color: var(--capas-text-primary);
    transform: translateY(-2px);
}

.capas-menu-item:hover:before {
    width: 70%;
}

.capas-menu-item:hover .capas-icon svg {
    transform: translateY(-2px);
}

.capas-menu-item.active {
    background-color: var(--capas-active-bg);
    font-weight: 600;
    color: var(--capas-text-primary);
    box-shadow: inset 0 0 15px var(--capas-shadow-dark);
    border-bottom: 3px solid var(--capas-text-primary);
}

.capas-menu-item.active svg {
    stroke: var(--capas-text-primary);
}

.capas-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.capas-icon svg {
    transition: var(--capas-transition);
    width: calc(var(--capas-icon-size) + 2px);
    height: calc(var(--capas-icon-size) + 2px);
    max-width: 100%;
}

/* Burbujas Mejoradas - CORREGIDAS PARA NO SALIRSE */
.capas-bubble {
    position: absolute;
    border-radius: 50%;
    background: var(--capas-bubble-light);
    z-index: 1;
    animation: capasFloat 8s ease-in-out infinite;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid var(--capas-bubble-border);
    box-shadow: var(--capas-bubble-shadow);
}

.capas-bubble:nth-child(odd) {
    background: var(--capas-bubble-green);
}

/* BURBUJAS CORREGIDAS - Ajustadas para mantenerse dentro del header */
.capas-bubble:nth-child(1) {
    width: 45px;
    height: 45px;
    left: 8%;
    top: 40%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.capas-bubble:nth-child(2) {
    width: 28px;
    height: 28px;
    left: 22%;
    top: 50%;
    animation-delay: 0.5s;
    animation-duration: 7s;
}

.capas-bubble:nth-child(3) {
    width: 35px;
    height: 35px;
    left: 38%;
    top: 45%;
    animation-delay: 1s;
    animation-duration: 5s;
}

.capas-bubble:nth-child(4) {
    width: 32px;
    height: 32px;
    left: 58%;
    top: 45%;
    animation-delay: 1.5s;
    animation-duration: 6.5s;
}

.capas-bubble:nth-child(5) {
    width: 40px;
    height: 40px;
    left: 72%;
    top: 35%;
    animation-delay: 2s;
    animation-duration: 7.5s;
}

.capas-bubble:nth-child(6) {
    width: 26px;
    height: 26px;
    left: 85%;
    top: 50%;
    animation-delay: 2.5s;
    animation-duration: 5.5s;
}

.capas-bubble:nth-child(7) {
    width: 20px;
    height: 20px;
    left: 18%;
    top: 25%;
    animation-delay: 3s;
    animation-duration: 4.5s;
}

.capas-bubble:nth-child(8) {
    width: 23px;
    height: 23px;
    left: 68%;
    top: 25%;
    animation-delay: 1.2s;
    animation-duration: 6.2s;
}

/* Animación ajustada para que las burbujas no se salgan */
@keyframes capasFloat {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.5;
    }
    25% {
        transform: translateY(-5px) translateX(2px) scale(1.05);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-8px) translateX(-2px) scale(1.1);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-3px) translateX(3px) scale(1.05);
        opacity: 0.7;
    }
    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.5;
    }
}

/* Menú hamburguesa para móviles */
.capas-toggle {
    display: none;
    position: absolute;
    right: var(--capas-padding);
    cursor: pointer;
    z-index: 10;
}

/* Solo cuando está activo (X para cerrar), se mantiene fijo en la pantalla */
.capas-toggle.active {
    position: fixed;
    top: 25px;
    right: var(--capas-padding);
    z-index: 100;
}

.capas-toggle-bar {
    width: 25px;
    height: 3px;
    background-color: var(--capas-text-primary);
    margin: 5px 0;
    transition: 0.4s;
    border-radius: 2px;
}

/* Clase que se agregará con JavaScript para hacer el encabezado fijo */
.capas-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    background: linear-gradient(90deg, #1976d2 15%, #1976d2 50%, #1976d2 85%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.5s ease;
    z-index: 1001 !important; /* Aún más alto cuando está fijo */
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Ajustamos el navbar cuando está en modo sticky */
.capas-header.sticky .capas-navbar {
    margin: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* Header más pequeño cuando está sticky - TANTO EN PC COMO MÓVILES */
.capas-header.sticky .capas-navbar {
    height: 70px; /* Reducido de 95px */
    transition: height 0.3s ease;
}

.capas-header.sticky .capas-logo {
    height: 50px; /* Reducido de 70px */
    width: auto;
    transition: all 0.3s ease;
}

.capas-header.sticky .capas-logo-image {
    height: 50px !important; /* Logo más pequeño */
    transition: height 0.3s ease;
}

/* SOLO para elementos del menú en PC (no móviles) */
.capas-header.sticky .capas-menu-item:not(.capas-menu-item-inicio) {
    height: 70px; /* Ajustar altura de los elementos del menú */
    font-size: 14px; /* Texto ligeramente más pequeño */
    padding: 12px 10px; /* Padding reducido */
    transition: all 0.3s ease;
}

/* Mantener el enlace principal del menú inicio en tamaño sticky */
.capas-header.sticky .capas-main-link {
    height: 70px;
    font-size: 14px;
    padding: 12px 10px;
    transition: all 0.3s ease;
}

/* Añadimos un elemento para compensar el espacio cuando el header se vuelve fixed */
.header-spacer {
    display: none;
    height: var(--capas-nav-height);
    transition: all 0.3s ease;
}

.header-spacer.active {
    display: block;
}

/* DROPDOWN MEJORADO - SIN CONFLICTOS Y OPTIMIZADO */
/* DROPDOWN MEJORADO - SIN CONFLICTOS Y OPTIMIZADO */

.capas-menu-item-inicio {
    position: relative;
    /* Heredar todos los estilos de .capas-menu-item */
}

.capas-main-link {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--capas-transition-smooth);
    text-align: center;
    flex-direction: column;
    gap: var(--capas-menu-gap);
    box-sizing: border-box;
}

/* TRIÁNGULO INDICADOR PARA PC Y MÓVILES */
.capas-main-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease, border-top-color 0.3s ease;
    z-index: 1;
}

/* Efectos hover en PC */
.capas-menu-item-inicio:hover .capas-main-link::after {
    border-top-color: rgba(255, 255, 255, 1);
    transform: translateX(-50%) rotate(180deg);
}

.capas-main-link:before {
    display: none; /* Quitar la línea del main-link */
}

/* MANTENER efectos hover originales del menu-item */
.capas-menu-item-inicio:hover {
    background-color: var(--capas-hover-bg);
    color: var(--capas-text-primary);
    transform: translateY(-2px);
}

.capas-menu-item-inicio:hover:before {
    width: 70%;
}

.capas-menu-item-inicio:hover .capas-icon svg {
    transform: translateY(-2px);
}

/* QUITAR efectos hover duplicados del main-link */
.capas-menu-item-inicio:hover .capas-main-link {
    background-color: transparent; /* Sin fondo extra */
    color: inherit; /* Heredar color del padre */
    transform: none; /* Sin movimiento extra */
}

.capas-menu-item-inicio:hover .capas-main-link .capas-icon svg {
    transform: none; /* El ícono ya se mueve con el padre */
}

.capas-menu-item-inicio.active .capas-main-link {
    background-color: var(--capas-active-bg);
    font-weight: 600;
    color: var(--capas-text-primary);
    box-shadow: inset 0 0 15px var(--capas-shadow-dark);
    border-bottom: 3px solid var(--capas-text-primary);
}

/* Dropdown específico para Inicio - SIN MOVIMIENTO VERTICAL */
.capas-menu-item-inicio .capas-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    background: linear-gradient(135deg, var(--capas-green-dark), var(--capas-green-medium));
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    /* ELIMINADO: transform: translateX(-50%) translateY(-15px); */
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9999;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    overflow: hidden;
    pointer-events: none;
}

.capas-menu-item-inicio:hover .capas-dropdown {
    opacity: 1;
    visibility: visible;
    /* MANTENIDO SOLO: transform: translateX(-50%); SIN translateY */
    transform: translateX(-50%);
    pointer-events: auto;
}

/* ÁREA EXTENDIDA INVISIBLE PARA EVITAR GLITCHES */
.capas-menu-item-inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    bottom: -15px;
    z-index: -1;
    background: transparent;
    pointer-events: none;
}

/* ÁREA INVISIBLE ENTRE MENÚ Y DROPDOWN PARA EVITAR GLITCHES */
.capas-menu-item-inicio::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 5px;
    background: transparent;
    z-index: 10;
    pointer-events: auto;
}

.capas-menu-item-inicio .capas-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--capas-green-dark);
    z-index: 1;
}

.capas-menu-item-inicio .capas-dropdown-item {
    display: block;
    color: var(--capas-text-primary);
    text-decoration: none;
    padding: 16px 24px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    background: transparent;
    pointer-events: auto;
}

.capas-menu-item-inicio .capas-dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 13px 13px;
}

.capas-menu-item-inicio .capas-dropdown-item:first-child {
    border-radius: 13px 13px 0 0;
}

.capas-menu-item-inicio .capas-dropdown-item:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    color: var(--capas-text-primary);
    padding-left: 28px;
    transform: translateX(3px);
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.4);
}

/* Animación suave para el dropdown SIN MOVIMIENTO VERTICAL */
@keyframes dropdownSlide {
    from {
        opacity: 0;
        /* ELIMINADO: transform: translateX(-50%) translateY(-20px) scale(0.95); */
        transform: translateX(-50%) scale(0.95);
    }
    to {
        opacity: 1;
        /* ELIMINADO: transform: translateX(-50%) translateY(0) scale(1); */
        transform: translateX(-50%) scale(1);
    }
}

.capas-menu-item-inicio:hover .capas-dropdown {
    animation: dropdownSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* DELAYS AJUSTADOS PARA EVITAR GLITCHES */
.capas-menu-item-inicio .capas-dropdown {
    transition-delay: 0s, 0.15s; /* Delay solo en visibility para evitar glitches */
}

.capas-menu-item-inicio:hover .capas-dropdown {
    transition-delay: 0s;
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 768px) {
    /* RESETEAR áreas invisibles en móviles */
    .capas-menu-item-inicio::before,
    .capas-menu-item-inicio::after {
        display: none !important;
    }
    
    .capas-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background: linear-gradient(135deg, var(--capas-green-dark) 0%, var(--capas-green-light) 100%);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 70px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px var(--capas-shadow);
        z-index: 5;
        box-sizing: border-box;
        
        /* CORRECCIÓN CRÍTICA: Permitir scroll interno */
        overflow-y: auto;
        overflow-x: hidden;
        
        /* Asegurar que el scroll funcione suavemente */
        -webkit-overflow-scrolling: touch;
        
        /* Padding inferior para evitar que el último elemento quede oculto */
        padding-bottom: 80px;
    }
    
    .capas-menu.active {
        right: 0;
    }
    
    .capas-menu-item {
        width: 100%;
        height: auto;
        padding: 15px 20px;
        flex-shrink: 0; /* Evitar que se compriman */
        min-height: 50px; /* Altura mínima para toque */
    }
    
    .capas-toggle {
        display: block;
    }
    
    .capas-toggle.active .capas-toggle-bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .capas-toggle.active .capas-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    
    .capas-toggle.active .capas-toggle-bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    /* Ajustes adicionales para móviles */
    .capas-navbar {
        width: calc(100% - 10px);
        margin: 0 5px;
    }
    
    .capas-logo {
        margin-left: 0;
        max-width: 280px;
        width: auto;
    }
    
    .capas-logo-image {
        height: 80px !important;
        width: auto;
    }

    /* Header sticky más pequeño en móviles */
    .capas-header.sticky {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .capas-header.sticky .capas-navbar {
        height: 65px;
    }
    
    .capas-header.sticky .capas-logo {
        height: 45px;
    }
    
    .capas-header.sticky .capas-logo-image {
        height: 45px !important;
    }

    /* Ajustes responsivos para el título */
    .titulo-principal-container {
        padding: 30px 15px 15px;
    }
    
    .titulo-referencia {
        font-size: 24px;
    }
    
    .subtitle-decoration .line {
        width: 30px;
    }

    .mc-logo-container {
        margin-top: 20px;
    }
    
    .mc-footer-logo {
        max-width: 200px;
    }

    .scroll-top-btn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }

    /* Ajustes para móviles del menú inicio */
    .capas-menu-item-inicio {
        width: 100%;
        display: block;
    }
    
    .capas-main-link {
        width: 100%;
        height: auto;
        padding: 15px 20px;
        position: relative; /* Agregar para posicionar el triángulo */
    }
    
    /* TRIÁNGULO INDICADOR SOLO EN MÓVILES */
    .capas-main-link::after {
        content: '';
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba(255, 255, 255, 0.7);
        transition: transform 0.3s ease, border-top-color 0.3s ease;
        z-index: 1;
    }
    
    /* Rotar triángulo cuando está activo */
    .capas-menu-item-inicio.mobile-dropdown-active .capas-main-link::after {
        transform: translateX(-50%) rotate(180deg);
        border-top-color: rgba(255, 255, 255, 1);
    }
    
    /* ANULAR efectos sticky en móviles - mantener tamaño original */
    .capas-header.sticky .capas-menu-item,
    .capas-header.sticky .capas-menu-item-inicio,
    .capas-header.sticky .capas-main-link {
        height: auto !important;
        font-size: 15px !important;
        padding: 15px 20px !important;
    }
    
    /* CORREGIR posicionamiento del dropdown en móviles */
    .capas-menu-item-inicio .capas-dropdown {
        position: static !important; /* Forzar posición estática */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
        background: rgba(0, 0, 0, 0.15);
        margin-top: 8px;
        border-radius: 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-width: auto;
        width: 100%;
        
        /* NUEVO: Scroll interno para el dropdown si es necesario */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
    }
    
    .capas-menu-item-inicio .capas-dropdown::before {
        display: none;
    }
    
    .capas-menu-item-inicio.mobile-dropdown-active .capas-dropdown {
        max-height: 300px; /* Altura máxima limitada para permitir scroll */
    }
    
    .capas-menu-item-inicio .capas-dropdown-item {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 0;
        flex-shrink: 0; /* Evitar compresión */
    }
    
    .capas-menu-item-inicio .capas-dropdown-item:hover {
        padding-left: 20px;
        transform: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .capas-menu-item-inicio .capas-dropdown-item:first-child {
        border-radius: 8px 8px 0 0;
    }
    
    .capas-menu-item-inicio .capas-dropdown-item:last-child {
        border-radius: 0 0 8px 8px;
    }
}

/* Para pantallas más pequeñas */
@media screen and (max-width: 480px) {
    .capas-menu {
        width: 280px; /* Menú más ancho en pantallas pequeñas */
        padding-bottom: 90px; /* Espacio extra en pantallas pequeñas */
    }
    
    .capas-logo {
        max-width: 230px;
    }
    
    .capas-logo-image {
        height: 65px !important;
    }

    /* Header sticky aún más pequeño */
    .capas-header.sticky .capas-navbar {
        height: 60px;
    }
    
    .capas-header.sticky .capas-logo {
        height: 40px;
    }
    
    .capas-header.sticky .capas-logo-image {
        height: 40px !important;
    }

    .scroll-top-btn {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 360px) {
    .capas-logo {
        max-width: 200px;
    }
    
    .capas-logo-image {
        height: 60px !important;
    }
}

/* Ajuste específico para pantallas muy pequeñas en altura */
@media screen and (max-width: 768px) and (max-height: 600px) {
    .capas-menu {
        padding-top: 60px; /* Menos padding superior en pantallas cortas */
        padding-bottom: 100px; /* Más espacio inferior en pantallas cortas */
    }
    
    .capas-menu-item {
        padding: 12px 20px; /* Padding reducido en pantallas cortas */
        min-height: 45px;
    }
}

/* Indicador visual de scroll para el menú */
.capas-menu::-webkit-scrollbar {
    width: 4px;
}

.capas-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.capas-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.capas-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar para el dropdown también */
.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar {
    width: 3px;
}

.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}s

.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Nueva clase SOLO para desktop */
@media screen and (min-width: 769px) {
    .capas-menu-item-inicio.dropdown-open .capas-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        /* SIN MOVIMIENTO VERTICAL */
        transform: translateX(-50%) !important;
        pointer-events: auto !important;
    }
}

/* Asegurar que en móviles no se aplique */
@media screen and (max-width: 768px) {
    .capas-menu-item-inicio.dropdown-open .capas-dropdown {
        /* Anular cualquier efecto en móviles */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}


/* Para pantallas más pequeñas */
@media screen and (max-width: 480px) {
    .capas-menu {
        width: 280px; /* Menú más ancho en pantallas pequeñas */
        padding-bottom: 90px; /* Espacio extra en pantallas pequeñas */
    }
    
    .capas-logo {
        max-width: 230px;
    }
    
    .capas-logo-image {
        height: 65px !important;
    }

    /* Header sticky aún más pequeño */
    .capas-header.sticky .capas-navbar {
        height: 60px;
    }
    
    .capas-header.sticky .capas-logo {
        height: 40px;
    }
    
    .capas-header.sticky .capas-logo-image {
        height: 40px !important;
    }
}

/* Para pantallas muy pequeñas */
@media screen and (max-width: 360px) {
    .capas-logo {
        max-width: 200px;
    }
    
    .capas-logo-image {
        height: 60px !important;
    }
}

/* Ajuste específico para pantallas muy pequeñas en altura */
@media screen and (max-width: 768px) and (max-height: 600px) {
    .capas-menu {
        padding-top: 60px; /* Menos padding superior en pantallas cortas */
        padding-bottom: 100px; /* Más espacio inferior en pantallas cortas */
    }
    
    .capas-menu-item {
        padding: 12px 20px; /* Padding reducido en pantallas cortas */
        min-height: 45px;
    }
}

/* Indicador visual de scroll para el menú */
.capas-menu::-webkit-scrollbar {
    width: 4px;
}

.capas-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.capas-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.capas-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar para el dropdown también */
.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar {
    width: 3px;
}

.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.capas-menu-item-inicio .capas-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}
/* Contenedor mejorado para el título principal */
.titulo-principal-container {
    padding: 40px 20px 20px; /* Espacio superior aumentado para separar del header */
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    background: rgba(0, 119, 182, 0.2);
    border-radius: 0 0 50% 50% / 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Onda decorativa detrás del título */
.wave-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,96L48,112C96,128,192,160,288,170.7C384,181,480,171,576,144C672,117,768,75,864,64C960,53,1056,75,1152,96C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: center;
    opacity: 0.6;
    z-index: 0;
}

/* Mejorar apariencia del título */
.titulo-referencia {
    position: relative;
    font-weight: 700;
    margin: 0 0 15px;
    padding-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    font-size: 28px;
    color: white;
    z-index: 1;
}

/* Decoración debajo del título */
.subtitle-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 1;
}

.subtitle-decoration .line {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.subtitle-decoration .dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    margin: 0 10px;
}

/* Ajuste responsivo para el título */
@media (max-width: 768px) {
    .titulo-principal-container {
        padding: 30px 15px 15px;
    }
    
    .titulo-referencia {
        font-size: 24px;
    }
    
    .subtitle-decoration .line {
        width: 30px;
    }
}

/* Ajustar espacio entre el nuevo título y el contenedor */
.container {
    margin-top: 20px;
}








/* Estilos para el botón de Pagar Ahora (versión sutil amarilla) */
.btn-pagar {
    background: rgba(248, 210, 16, 0.8); /* Amarillo más sutil */
    color: #333; /* Texto oscuro para mejor contraste */
    border: none;
    padding: 8px 15px; /* Tamaño en desktop */
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85em; /* Texto en desktop */
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(248, 210, 16, 0.3);
    margin-top: 5px;
}

.btn-pagar:hover {
    background: rgba(248, 210, 16, 1); /* Amarillo más intenso al hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248, 210, 16, 0.4);
    color: #333;
    text-decoration: none;
}

.btn-pagar:active {
    transform: translateY(1px);
}

.btn-pagar i {
    font-size: 1em;
}

.botones-resultado {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1); /* Línea más sutil */
}

/* Media query para dispositivos móviles - ahora en un punto medio */
@media (max-width: 480px) {
    .btn-pagar {
        padding: 10px 18px; /* Punto medio para móviles */
        font-size: 0.9em; /* Texto ligeramente más grande */
        width: 60%; /* Ancho más moderado que antes */
        justify-content: center;
        margin: 8px auto 5px;
    }
    
    .btn-pagar i {
        font-size: 1.1em; /* Icono ligeramente más grande */
    }
    
    .botones-resultado {
        margin-top: 15px;
        padding-top: 10px;
    }
}




/* Mejoras para el ícono de información (?) para hacerlo más visible */
.info-icon {
    color: #f8d210; /* Mantener el amarillo */
    cursor: pointer;
    font-size: 18px; /* Ligeramente más grande */
    transition: all 0.3s ease;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; /* Más grande */
    height: 26px; /* Más grande */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    /* Agregar efecto de pulso para llamar la atención */
    animation: pulse-info 2s infinite;
    /* Agregar texto que indique que es clickeable */
    position: relative;
}

/* Animación de pulso para el ícono */
@keyframes pulse-info {
    0% {
        box-shadow: 0 0 0 0 rgba(248, 210, 16, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(248, 210, 16, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(248, 210, 16, 0);
    }
}

/* Al pasar el mouse, mostrar efecto más obvio */
.info-icon:hover {
    background-color: #f8d210;
    color: #000; /* Texto negro cuando el fondo es amarillo */
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(248, 210, 16, 0.8);
}

/* Eliminamos completamente el ::after que contenía "Click aquí" */

/* Animación de rebote que se activará desde JavaScript */
.tooltip-info.bounce-attention {
    animation: attention-to-info 3s ease-in-out forwards;
}

@keyframes attention-to-info {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50% {
        transform: translateY(-3px);
    }
    20%, 40% {
        transform: translateY(2px);
    }
}

/* Mejorar contraste del tooltip */
.tooltip-info .tooltip-text {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(248, 210, 16, 0.5);
}

/* Ajustes para móviles - sin referencia al texto "Click aquí" */
@media (max-width: 480px) {
    .info-icon {
        width: 28px; /* Ligeramente más grande en móviles */
        height: 28px;
        font-size: 19px;
    }
}

/* Para el contenido de la página */
body {
    line-height: 1.6;
}

/* Para el header - OVERRIDE específico */
.capas-header,
.capas-header * {
    line-height: normal !important;
}


/* DROPDOWN TRANSPARENCIA - SIN MOVIMIENTO VERTICAL */
/* ===== CORRECCIÓN SOLO PARA EL FONDO OSCURO DE MODALES ===== */
@media (min-width: 769px) {
    .modal-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        /* Compensar el zoom del 90% */
        width: 111.11vw !important;
        height: 111.11vh !important;
        z-index: 1040 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .modal-backdrop.show {
        opacity: 0.5 !important;
    }
}